<template>
	<view class="com">
		<!-- #ifdef APP-PLUS -->
		<view style="margin-top: 30px;"></view>
		<!-- #endif -->
		
		<!-- 搜索栏区域 -->
		<search-item @showDrawer="showDrawer('showLeft')"></search-item>
		<!-- 侧拉栏区域 -->
		<view class="drawer">
			<!-- 侧拉栏内容 -->
			<uni-drawer mask ref="showLeft" mode="left" :width="250" @change="change($event,'showLeft')">
				<drawer-content-item @closeDrawer="closeDrawer('showLeft')" @scan='scan()'></drawer-content-item>
			</uni-drawer>
		</view>
		
		<!-- 列表区域 -->
		<view class="list" v-for="(item,index) in list" :key="item.id" @click="goDetail(index)">
			<view class="text">
				<view class="u_text">{{ item.title }}</view>
				<view class="l_text">{{ item.time }}</view>
			</view>
			<view class="img">
				<image :src="item.img_url"></image>
			</view>
		</view>
		<uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical"
			 @fabClick="fabClick" />
		<!-- 底部 -->
		<view class="bottom" v-show="flag">前面的区域以后再来探索吧</view>
	</view>
</template>

<script>
	import searchItem from '../../components/search-item/search-item.vue';
	import fabItem from '../../components/uni-fab/uni-fab.vue';
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				horizontal: 'right',
				vertical: 'bottom',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					buttonColor: '#d81e06',
					iconColor: '#fff'
				},
				reFresh: '',
				list:[],
				flag: false,
				pageIndex: 0
			}
		},
		computed: mapState(['isLogin','userInfo']),
		components: {
			'search-item': searchItem
		},
		onPullDownRefresh() {
			this.pageIndex = 0
			this.list = []
			setTimeout(()=>{
				this.getArticle()
				setTimeout(() => {
					uni.stopPullDownRefresh()
				},500)
			},400)
		},
		onReachBottom() {
			this.pageIndex++
			this.getArticle()
		},
		onLoad() {
			this.pageIndex = 0
			this.list = []
			this.getArticle()
		},
		watch: {
			reFresh: function() {
				this.pageIndex = 0
				this.list = []
				setTimeout(() => {
					this.getArticle()
				},500)
			}
		},
		methods: {
			getArticle() {
				uni.request({
					url: 'http://www.yingke.com/Index/getArticleList?page='+ this.pageIndex,
					method: 'POST',
					success: (res) => {
						if(res.data.data.length==0)
							this.flag = true
						else
							this.list = [...this.list,...res.data.data]
					}
				})
			},
			goDetail(index) {
				uni.navigateTo({
					url: '../com-detail/com-detail?index='+index+'&data='+ JSON.stringify(this.list[index])
				})
			},
			fabClick() {
				if(!this.isLogin)
					uni.navigateTo({
						url: '../post/post?uid='+this.userInfo.id
					})
				else{
					uni.showToast({
						title: '当前未登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '../login/login'
						})
					},1000)
				}
			},
			// 打开窗口
			showDrawer(e) {
				// console.log('打开抽屉')
				this.$refs[e].open();
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close();
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				// console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			}
		}
	}
</script>

<style lang="scss">
	.com{
		.drawer{
			.close {
				padding: 10px;
			}
		}
		.list{
			width: 750rpx;
			height: 200rpx;
			display: flex;
			margin-top: 5px;
			border-bottom: 1px solid #eaeaea;
			.text{
				width: 480rpx;
				float: left;
				.u_text{
					margin: 10px 5px 10px;
				}
				.l_text{
					margin-left: 5px;
				}
			}
			.img{
				width: 120rpx;
				float: right;
				margin: 5px 5px;
				image{
					width: 120px;
					height: 80px;
					border-radius: 5px;
				}
			}
		}
		
		.bottom{
			height: 50px;
			margin-top: 20px;
			text-align: center;
		}
	}
</style>
